<template>
  <div style="display: flex;">
    <div style="max-height: 100vh;">
      <div class="chat-leftsidebar mr-lg-1">
        <div class="tab-content">
          <!-- Start chats tab-pane -->
          <div class="tab-pane fade show active" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab">
            <!-- Start chats content -->
            <div>
              <div class="px-4 pt-4">
                <div style="display: flex;justify-content: space-between;">
                  <h4 class="mb-4">ChatGPT</h4>
                  <a-tooltip placement="right" @click="createSession()">
                    <template #title>
                      <span>创建新会话</span>
                    </template>
                    <div style="width: 50px;height: 35px;cursor: pointer;">
                      <svg t="1681136894737" class="icon" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="19317" width="35" height="35">
                        <path
                            d="M750.92266667 692.3328V521.67466667c0-18.8512 15.28106667-34.13333333 34.1312-34.13333334s34.13226667 15.28213333 34.13226666 34.13333334v170.656h170.656c18.8512 0 34.13333333 15.28213333 34.13333334 34.13333333s-15.28213333 34.1312-34.13333334 34.1312h-170.656V931.25333333c0 18.85013333-15.28106667 34.13226667-34.13226666 34.13226667s-34.13226667-15.28213333-34.13226667-34.13333333V760.59733333H580.26346667c-18.8512 0-34.13333333-15.28106667-34.13333334-34.13226666s15.28213333-34.13226667 34.13333334-34.13226667h170.65813333z m273.0528-307.18613333c0 18.8512-15.28213333 34.13333333-34.13333334 34.13333333s-34.1312-15.28213333-34.1312-34.13333333V146.22613333c0-18.85013333-15.28106667-34.13226667-34.13226666-34.13226666H102.42133333c-18.8512 0-34.13333333 15.28213333-34.13333333 34.13226666v546.10666667c0 18.8512 15.28213333 34.13333333 34.13333333 34.13333333h136.52693334c37.70133333 0 68.2624 30.56213333 68.2624 68.2624v99.3472l102.39573333-79.64053333c9.2192-7.1712 22.50666667-5.5104 29.67573333 3.70986667a21.1488 21.1488 0 0 1 4.4544 12.98346666v26.5472a34.13013333 34.13013333 0 0 1-13.17653333 26.94186667l-108.98346667 84.7648c-22.31893333 17.36-54.48533333 13.33866667-71.84533333-8.98133333a51.1936 51.1936 0 0 1-10.784-31.43253334v-134.24H102.42026667c-56.55146667 0-102.39573333-45.84533333-102.39573334-102.39573333V146.22613333c0-56.5504 45.84533333-102.39466667 102.39573334-102.39466666H921.57866667c56.55146667 0 102.39573333 45.84426667 102.39573333 102.39466666v238.92053334z"
                            fill="#7269ef" p-id="19318"></path>
                      </svg>
                    </div>
                  </a-tooltip>
                </div>

                <div class="search-box chat-search-box">
                  <div class="input-group mb-3 bg-light  input-group-lg rounded-lg">
                    <div class="input-group-prepend">
                      <button class="btn btn-link text-muted pr-1 text-decoration-none" type="button">
                        <i class="ri-search-line search-icon font-size-18"></i>
                      </button>
                    </div>
                    <input type="text" class="form-control bg-light" placeholder="查询历史会话">
                  </div>
                </div> <!-- Search Box-->
              </div> <!-- .p-4 -->
              <div class="px-4 pb-4" dir="ltr"/>
              <!-- end user status -->
              <div class="px-2" style="overflow: auto;">
                <div class="chat-message-list" data-simplebar>
                  <ul class="list-unstyled chat-list chat-user-list">
                    <li @click="switchSessions(item)"
                        :class="{ 'active': conversation.get(item).id === currentActiveSession, 'typing': loading }"
                        v-for="(item, index) in conversation.keys()" :key="index">
                      <a href="#">
                        <div class="media">
                          <div class="chat-user-img online align-self-center mr-3"
                               :class="{ 'online': !requestError, 'away': requestError }">
                            <img src="@/assets/images/users/ai.svg" class="rounded-circle avatar-xs" alt="">
                            <span class="user-status"></span>
                          </div>
                          <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-15 mb-1">{{ conversation.get(item).title }}</h5>
                            <p v-if="conversation.get(item).typing" class="chat-user-message text-truncate mb-0">
                              typing<span
                                class="animate-typing">
                                <span class="dot"></span>
                                <span class="dot"></span>
                                <span class="dot"></span>
                              </span></p>
                          </div>
                          <div class="font-size-11">{{ conversation.get(item).updateTime }}</div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div style=" display: flex; justify-content: center;align-items: center;width: 100%;height: 4vh">
                <a-tooltip placement="right" @click="clearSession()">
                  <template #title>
                    <span>清空会话列表</span>
                  </template>
                  <svg style="cursor: pointer;" t="1681138929456" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="20657" width="40" height="40">
                    <path
                        d="M274.56 798.997333l19.434667-25.130666-33.792 68.565333a18.133333 18.133333 0 0 0 11.562666 25.536l59.733334 16a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.818667 35.626667-35.989333 45.290666-48.469333l19.456-25.130667-33.813333 68.565333a18.133333 18.133333 0 0 0 11.562667 25.536l84.48 22.634667a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.84 35.626667-35.989333 45.269333-48.469333l19.456-25.130667-33.813333 68.565333A18.133333 18.133333 0 0 0 535.530667 938.666667l72.106666 19.328a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.84 35.626667-36.010667 45.269334-48.490667l19.456-25.130667-33.813334 68.586667a18.133333 18.133333 0 0 0 11.584 25.514667l86.421334 23.338666 3.84-0.213333c13.269333-0.704 29.056-5.034667 43.84-12.8 29.781333-15.701333 48.170667-43.2 52.181333-78.250667 2.133333-18.517333 4.778667-38.549333 8.405333-63.530666 1.642667-11.221333 2.944-20.010667 6.229334-41.834667 11.050667-73.322667 14.634667-101.034667 17.130666-133.674667l0.938667-12.373333 2.837333-2.922667 12.330667-1.344a41.813333 41.813333 0 0 0 24.810667-11.221333c10.730667-10.24 14.805333-25.386667 11.093333-42.197333l-37.546667-171.584c-3.029333-13.696-11.264-27.946667-23.146666-39.829334-11.648-11.626667-25.92-20.138667-39.893334-23.893333L723.626667 331.306667l-2.261334-3.925334L774.250667 130.133333c8.32-31.061333-11.754667-63.744-44.970667-72.64l-79.509333-21.312c-33.194667-8.896-66.922667 9.365333-75.264 40.426667l-52.842667 197.269333-3.925333 2.261334-118.101334-31.637334c-13.994667-3.754667-30.634667-3.498667-46.506666 0.746667-16.256 4.352-30.506667 12.586667-39.957334 22.933333l-118.314666 129.792c-11.605333 12.714667-15.658667 27.84-11.52 42.090667 4.16 14.229333 15.850667 25.194667 32.896 30.528l13.610666 4.266667 2.133334 3.882666-3.626667 13.802667c-21.12 79.850667-52.885333 136.917333-85.717333 150.890667-47.530667 20.202667-72.938667 49.429333-78.421334 85.034666-5.034667 32.682667 9.28 67.114667 37.589334 91.541334l22.037333 8.341333 74.666667 20.010667a42.666667 42.666667 0 0 0 41.216-11.050667c15.274667-15.274667 26.88-28.032 34.837333-38.293333z m551.381333-396.565333c14.144 3.797333 29.952 19.2 32.768 32l34.56 157.781333a10.666667 10.666667 0 0 1-13.184 12.586667L240.64 433.493333a10.666667 10.666667 0 0 1-5.12-17.493333l108.8-119.36c8.832-9.685333 30.229333-15.146667 44.373333-11.349333l141.333334 37.866666a21.333333 21.333333 0 0 0 26.133333-15.082666l58.304-217.642667a21.333333 21.333333 0 0 1 26.133333-15.082667l77.056 20.650667a21.333333 21.333333 0 0 1 15.082667 26.133333l-58.325333 217.642667a21.333333 21.333333 0 0 0 15.082666 26.112l136.448 36.565333zM315.456 701.568c-33.664 45.141333-64.597333 79.082667-92.8 101.802667l-5.909333 4.778666-2.837334 0.597334-88.106666-24.106667-2.922667-3.2c-13.034667-14.165333-19.370667-31.04-16.981333-46.592 3.285333-21.333333 22.058667-39.338667 53.205333-52.586667 31.722667-13.482667 59.818667-47.104 82.922667-99.904 10.026667-22.954667 18.88-48.725333 26.389333-76.586666l3.882667-14.4 3.904-2.261334 566.165333 151.701334 2.346667 3.306666-0.789334 12.224c-1.984 30.592-30.336 229.397333-32.128 244.906667-2.346667 20.416-11.306667 34.986667-27.605333 44.394667a73.237333 73.237333 0 0 1-21.397333 8.106666l-5.013334 0.725334-60.373333-16.170667 11.242667-20.288c8.277333-14.976 22.656-43.84 43.093333-86.613333a21.12 21.12 0 0 0-9.962667-28.16l-3.136-1.493334a21.333333 21.333333 0 0 0-26.261333 6.485334c-33.642667 45.056-64.533333 78.912-92.672 101.546666l-5.909333 4.757334-2.837334 0.597333-52.544-14.08 11.114667-20.266667c3.562667-6.485333 7.04-13.013333 10.453333-19.626666 7.04-13.504 17.898667-35.797333 32.597334-66.816a21.290667 21.290667 0 0 0-9.984-28.309334l-3.029334-1.450666a21.333333 21.333333 0 0 0-26.368 6.442666c-33.6 45.013333-64.469333 78.826667-92.608 101.482667l-5.909333 4.757333-2.837333 0.597334-52.138667-13.973334 11.114667-20.266666c3.242667-5.888 6.72-12.416 10.453333-19.626667 6.997333-13.461333 17.962667-35.946667 32.896-67.434667a20.970667 20.970667 0 0 0-10.112-28.010666l-3.328-1.536a21.333333 21.333333 0 0 0-26.069333 6.613333c-33.642667 45.056-64.554667 78.976-92.778667 101.696l-5.909333 4.757333-2.837334 0.597334-32.64-8.746667 11.093334-20.245333c3.541333-6.506667 7.04-13.034667 10.453333-19.626667 6.976-13.482667 17.941333-35.968 32.874667-67.456a21.056 21.056 0 0 0-10.069334-28.074667l-3.242666-1.514666a21.333333 21.333333 0 0 0-26.154667 6.549333z"
                        fill="#7269ef" p-id="20658"></path>
                  </svg>
                </a-tooltip>
              </div>
              <!-- End Chat-message-list -->
            </div>
            <!-- Start chats content -->
          </div>
          <!-- End chats tab-pane -->

        </div>
        <!-- end tab content -->

      </div>


    </div>
    <div style="max-height: 100vh;flex: 1;" class="user-chat">
      <div class="d-lg-flex">
        <!-- start Chat conversation section -->
        <div class="w-100">
          <div class="p-3 p-lg-4 border-bottom">
            <div class="row align-items-center">
              <div class="col-sm-4 col-8">
                <div class="media align-items-center">
                  <div class="d-block d-lg-none mr-2">
                    <a href="javascript: void(0);" class="user-chat-remove text-muted font-size-16 p-2"><i
                        class="ri-arrow-left-s-line"></i></a>
                  </div>
                  <div class="mr-3">
                    <img src="@/assets/images/users/ai.svg" class="rounded-circle avatar-xs" alt="">
                  </div>
                  <div class="media-body overflow-hidden">
                    <h5 class="font-size-16 mb-0 text-truncate"><a href="#" class="text-reset user-profile-show">Ai
                      小助手</a>
                      <i class="ri-record-circle-fill font-size-10 d-inline-block ml-1"
                         :class="{ 'text-danger': requestError, 'text-success': !requestError }"></i>
                    </h5>
                  </div>
                </div>
              </div>
              <div class="col-sm-8 col-4">
                <ul class="list-inline user-chat-nav text-right mb-0">
                  <li class="list-inline-item" @click="deleteSessions()">
                    <div class="dropdown">
                      <a-tooltip placement="bottom">
                        <template #title>
                          <span>删除此会话</span>
                        </template>
                        <div class="btn nav-btn dropdown-toggle">
                          <i class="ri-delete-bin-line float-right text-muted"/>
                        </div>
                      </a-tooltip>
                    </div>
                  </li>
                </ul>
              </div>

            </div>
          </div>
          <!-- end Chat user head -->

          <!-- start Chat conversation -->
          <div class="chat-conversation p-3 p-lg-4" data-simplebar="init" style="overflow: auto;">
            <div v-if="false">{{ this.reply }}</div>
            <div v-if="currentSession !== undefined">
              <ul style="width: 100%" class="list-unstyled mb-0">

                <li :class="{ 'right': currentSession.recording.get(item).type === 'issue' }"
                    v-for="(item, index) in currentSession.recording.keys()" :key="index">
                  <div class="chat-day-title" v-if=" currentSession.recording.get(item).type === 'newTopic'">
                    <span class="title">{{ currentSession.recording.get(item).text }}</span>
                  </div>
                  <div class="conversation-list" v-else>
                    <div class="chat-avatar">
                      <img v-if="currentSession.recording.get(item).type === 'issue'"
                           src="@/assets/images/users/me.webp" alt="">
                      <img v-if="currentSession.recording.get(item).type === 'reply'" src="@/assets/images/users/ai.svg"
                           alt="">
                    </div>
                    <div class="user-chat-content" style="display: flex;flex-direction: column;flex: 1;">
                      <div class="ctext-wrap">
                        <div v-if="currentSession.recording.get(item).text === ''" class="user-chat-content">
                          <div class="ctext-wrap">
                            <div class="ctext-wrap-content">
                              <p class="mb-0">
                                typing
                                <span class="animate-typing">
                                  <span class="dot"></span>
                                  <span class="dot"></span>
                                  <span class="dot"></span>
                                </span>
                              </p>
                            </div>
                          </div>
                        </div>
                        <div v-else class="ctext-wrap-content" style="max-width: 80%;">
                          <div v-show="false">{{ reply }}</div>
                          <div style="width: 100%;"
                               v-if="currentSession.recording.get(item).type === 'issue' || currentSession.recording.get(item).type === 'reply'">
                            <v-md-preview @copy-code-success="handleCopyCodeSuccess" class="md"
                                          :text="currentSession.recording.get(item).text"></v-md-preview>
                          </div>
                          <!--     文件上传          -->
                          <div v-else>
                            <div class="card p-2 mb-2">
                              <div class="media align-items-center">
                                <div class="avatar-sm mr-3">
                                  <div class="avatar-title bg-soft-primary text-primary rounded font-size-20">
                                    <i class="ri-file-text-fill"></i>
                                  </div>
                                </div>
                                <div class="media-body">
                                  <div class="text-left">
                                    <h5 class="font-size-14 mb-1">admin_v1.0.zip</h5>
                                    <p class="text-muted font-size-13 mb-0">12.5 MB</p>
                                  </div>
                                </div>
                                <div class="ml-4">
                                  <ul class="list-inline mb-0 font-size-20">
                                    <li class="list-inline-item">
                                      <a href="#" class="text-muted">
                                        <i class="ri-download-2-line"></i>
                                      </a>
                                    </li>
                                    <li class="list-inline-item dropdown">
                                      <a class="dropdown-toggle text-muted" href="#" role="button"
                                         data-toggle="dropdown"
                                         aria-haspopup="true" aria-expanded="false">
                                        <i class="ri-more-fill"></i>
                                      </a>
                                      <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" href="#">Share <i
                                            class="ri-share-line float-right text-muted"></i></a>
                                        <a class="dropdown-item" href="#">Delete <i
                                            class="ri-delete-bin-line float-right text-muted"></i></a>
                                      </div>
                                    </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <p class="chat-time mb-0"><i class="ri-time-line align-middle"></i> <span
                              class="align-middle">{{ currentSession.recording.get(item).date }}</span>
                          </p>
                        </div>
                        <div class="dropdown align-self-start"
                             @mouseleave="operateleave(currentSession.recording.get(item))"
                             @click="operateover(currentSession.recording.get(item))">
                          <a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                             aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                          </a>
                          <div class="dropdown-menu"
                               :class="{'show':currentSession.recording.get(item).operate,'dropdown-menu-right':currentSession.recording.get(item).type === 'issue','dropdown-menu-left':currentSession.recording.get(item).type === 'reply'}">
                            <a class="dropdown-item" @click="copyText(currentSession.recording.get(item).text)"
                               href="#">Copy <i
                                class="ri-file-copy-line float-right text-muted"></i></a>
                            <a class="dropdown-item" @click="deleteSessionsRecording(item)" href="#">Delete <i
                                class="ri-delete-bin-line float-right text-muted"></i></a>
                          </div>
                        </div>
                      </div>
                      <div class="conversation-name">{{ currentSession.recording.get(item).name }}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- end Chat conversation end -->

          <!-- start Chat input section -->
          <div class="p-3 p-lg-4 border-top mb-0">
            <div class="row no-gutters">
              <div class="col">
                <div>
                  <input type="text" v-model="issue" @keyup.enter="questions()"
                         class="form-control form-control-lg bg-light border-light"
                         placeholder="请输入您要提问的问题 ...">
                </div>
              </div>
              <div class="col-auto">
                <div class="chat-input-links ml-md-2">
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                      <a-popover title="上传附件">
                        <template #content>
                          <a-upload
                              v-model:file-list="fileList"
                              name="file"
                              :multiple="true"
                              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                              :headers="headers"
                              @change="handleChange"
                          >
                            <a-button>
                              <upload-outlined></upload-outlined>
                              选择上传的文件
                            </a-button>
                          </a-upload>
                        </template>
                        <button type="button" class="btn btn-link text-decoration-none font-size-16 btn-lg waves-effect"
                                data-toggle="tooltip" data-placement="top" title="Attached File">
                          <svg t="1681140923753" class="icon" viewBox="0 0 1024 1024" version="1.1"
                               xmlns="http://www.w3.org/2000/svg" p-id="23727" width="20" height="20">
                            <path
                                d="M924.672 126.976q36.864 36.864 54.784 82.432t17.92 93.696-17.92 93.696-54.784 82.432l-392.192 389.12q-36.864 36.864-90.624 61.44t-113.664 28.672-122.368-16.384-115.712-73.728q-52.224-52.224-72.704-113.152t-16.384-121.344 28.16-113.664 60.928-90.112l348.16-345.088q9.216-9.216 27.136-4.608t27.136 13.824q8.192 9.216 13.312 27.136t-4.096 27.136l-347.136 344.064q-27.648 27.648-46.08 64.512t-21.504 78.848 12.288 84.992 55.296 82.944q35.84 35.84 79.36 50.688t86.528 12.288 81.92-18.944 66.56-44.032l391.168-388.096q27.648-27.648 39.424-57.344t11.264-58.88-13.824-56.832-36.864-51.2q-44.032-43.008-98.816-40.448t-110.08 57.856l-353.28 351.232q-23.552 23.552-23.04 52.224t18.944 47.104q22.528 22.528 51.712 18.432t47.616-22.528l320.512-318.464q9.216-9.216 27.136-4.608t27.136 13.824 14.336 27.136-4.096 27.136l-321.536 318.464q-36.864 36.864-70.656 51.2t-63.488 12.8-55.296-15.872-47.104-34.816q-17.408-16.384-31.232-41.984t-15.872-56.32 10.752-65.536 49.664-70.656q18.432-18.432 32.768-33.792 12.288-13.312 23.04-23.552t11.776-11.264l285.696-284.672q36.864-36.864 80.384-57.856t88.576-24.064 88.576 12.288 80.384 52.224z"
                                p-id="23728" fill="#7269ef"></path>
                          </svg>
                        </button>
                      </a-popover>
                    </li>
                    <li class="list-inline-item">
                      <a-tooltip placement="top">
                        <template #title>
                          <span>发送</span>
                        </template>
                        <button @click="questions(false)" type="submit"
                                class="btn btn-link font-size-16 btn-lg chat-send waves-effect waves-light">
                          <svg t="1681141038223" class="icon" viewBox="0 0 1024 1024" version="1.1"
                               xmlns="http://www.w3.org/2000/svg" p-id="26057" width="20" height="20">
                            <path
                                d="M260.315429 711.789714l328.923428-328.923428a36.717714 36.717714 0 1 1 51.931429 51.931428l-233.654857 233.618286 181.723428 181.686857L848.822857 175.213714 173.897143 434.761143l129.828571 129.828571-51.931428 51.894857-167.899429-167.862857a36.717714 36.717714 0 0 1 12.653714-60.196571L900.827429 75.702857a36.717714 36.717714 0 0 1 47.542857 47.506286L635.574857 927.451429a36.717714 36.717714 0 0 1-60.16 12.653714l-219.794286-219.794286-21.577142 21.577143 41.947428 72.667429a36.717714 36.717714 0 1 1-63.561143 36.681142L238.994286 724.114286l21.321143-12.288z"
                                fill="#7269ef" p-id="26058"></path>
                          </svg>
                        </button>
                      </a-tooltip>
                    </li>
                    <li class="list-inline-item">
                      <a-tooltip placement="top">
                        <template #title>
                          <span>开启新话题</span>
                        </template>
                        <button @click="questions(true)" type="submit"
                                class="btn btn-link font-size-16 btn-lg chat-send waves-effect waves-light">
                          <svg t="1681141003529" class="icon" viewBox="0 0 1024 1024" version="1.1"
                               xmlns="http://www.w3.org/2000/svg" p-id="24893" width="20" height="20">
                            <path
                                d="M963.072 446.336c0-211.744-200.96-384-448-384s-448 172.256-448 384c0 116.48 63.008 226.048 172.896 300.672 14.656 9.984 34.528 6.144 44.448-8.512 9.952-14.624 6.112-34.528-8.512-44.448-92.032-62.496-144.832-152.768-144.832-247.712 0-176.448 172.256-320 384-320s384 143.552 384 320-172.256 320-384 320c-1.984 0-3.68 0.768-5.568 1.12-15.104-2.688-30.464 5.216-35.776 20.192-6.144 17.376-46.368 46.656-94.144 73.792 17.472-58.208 9.088-70.688 3.52-78.976a36.034 36.034 0 0 0-29.92-15.936c-17.664 0-32 14.304-32 32 0 5.824 1.536 11.264 4.256 15.936-3.232 18.24-17.216 60.864-33.088 99.872-4.928 12.096-1.984 25.984 7.36 35.072a32.049 32.049 0 0 0 22.272 8.992c4.384 0 8.8-0.896 12.992-2.752 36.48-16.256 147.68-69.12 187.616-125.664 243.552-3.488 440.48-174.08 440.48-383.648zM342.624 604.544a31.825 31.825 0 0 0 14.592 3.52c11.616 0 22.816-6.336 28.512-17.408l71.584-139.488 91.584 142.208a32.054 32.054 0 0 0 26.464 14.688h0.448c10.56 0 20.48-5.216 26.432-13.984l128.8-188.864c9.984-14.624 6.176-34.528-8.416-44.48-14.624-9.952-34.528-6.208-44.48 8.416L576.512 518.144l-95.456-148.288c-6.176-9.6-17.152-14.752-28.48-14.656-11.424 0.576-21.696 7.2-26.912 17.344L328.768 561.44c-8.096 15.744-1.888 35.04 13.856 43.104z"
                                fill="#7269ef" p-id="24894"></path>
                          </svg>
                        </button>
                      </a-tooltip>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- end Chat input section -->
        </div>
        <!-- end Chat conversation section -->
      </div>
    </div>
    <!--    <div style="display: flex;height: 80vh">
          <div class="Chat-list">
            <a-button type="primary" style="width: 100%;height: 60px" @click="createSession()">创建新会话</a-button>
            <div style="margin-top: 5%;height: 85%;overflow: auto;-ms-overflow-style: none; scrollbar-width: none;">
              <div class="conversation" v-for="item in conversation.keys()"
                   @click="switchSessions(conversation.get(item).id)">
                <p style="margin-right:10%;line-height: 45px;margin-left: 10%">{{ conversation.get(item).title }}</p>
              </div>
            </div>
            <a-button type="primary" danger style="width: 100%;height: 60px;margin-top: 1.6vh;border-radius: 0 0 0 10px"
                      @click="clearSession()">
              清空所有会话
            </a-button>
          </div>
          <div class="Chat">
            <div class="output">
              <div v-show="false">{{this.reply}}</div>
              <div v-if="!currentSession">
                <a-typography-title style="text-align: center;justify-content: center;padding-top: 40%">
                  请在下方提出你想要问的问题。
                </a-typography-title>
              </div>
              <div v-else="currentSession" class="scroll">
                <div v-for="item in currentSession.recording.keys()">
                  <div v-if="currentSession.recording.get(item).type==='issue' " class="question">
                    <a-comment>
                      <template #avatar>
                        <a-avatar
                            src="src/assets/me.webp"
                            alt="Han Solo"/>
                      </template>
                      <template #author><a>{{ currentSession.recording.get(item).date }}</a></template>
                      <template #content>
                        <div class="issue Chat-background">
                          <v-md-preview class="md" :text="currentSession.recording.get(item).text"></v-md-preview>
                        </div>
                      </template>
                    </a-comment>
                  </div>
                  <div v-if="currentSession.recording.get(item).type==='reply'" class="reply">
                    <a-comment>
                      <template #author><a>{{ currentSession.recording.get(item).date }}</a></template>
                      <template #avatar>
                        <a-avatar
                            src="src/assets/ai.svg"
                            alt="Han Solo"/>
                      </template>
                      <template #content>
                        <div class="Chat-background">
                          <v-md-preview :text="currentSession.recording.get(item).text"
                                        @copy-code-success="handleCopyCodeSuccess"
                                        class="md">
                          </v-md-preview>
                        </div>
                      </template>
                    </a-comment>
                  </div>
                </div>
              </div>
            </div>
            <div class="input">
              <div style="display: flex">
                <div>
                  <a-col :span="1">
                    <a-button type="primary" shape="round" style="height: 4.8vh;margin-top: 10px;margin-left: 10px"
                              :size="size">
                      <template #icon>
                        <DownloadOutlined/>
                      </template>
                      保存当前会话记录
                    </a-button>
                  </a-col>
                  <a-col :span="1">
                    <a-button type="primary" shape="round" danger style="height: 4.8vh;margin-left: 10px;margin-top: 10px"
                              :size="size" @click="clearCurrentSession()">
                      <template #icon>
                        <CloseCircleOutlined/>
                      </template>
                      清空当前会话记录
                    </a-button>
                  </a-col>
                </div>
                <div style="width: 60%;margin-left: 5%;margin-top: 2%">
                  <a-textarea v-model:value="issue" placeholder="请输入" :rows="4"/>
                </div>
                <a-button :loading="loading" type="primary" shape="round"
                          style="height: 4.8vh;margin-left: 4%;margin-top: 4%"
                          :size="size" @click="questions()">
                  <template #icon>
                    <CheckCircleTwoTone/>
                  </template>
                  提交
                </a-button>
              </div>
            </div>
          </div>
          <div class="Chat-config"></div>
        </div>-->
  </div>
</template>

<script lang="ts">
import {v4} from 'uuid'
import {message} from 'ant-design-vue';
import {DownloadOutlined, CheckCircleTwoTone, CloseCircleOutlined, UploadOutlined} from '@ant-design/icons-vue';
import axios from 'axios';
import {ref} from 'vue';

interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
}

interface FileInfo {
  file: FileItem;
  fileList: FileItem[];
}

export default {
  name: "Chat",
  components: {
    DownloadOutlined,
    CheckCircleTwoTone,
    CloseCircleOutlined,
    UploadOutlined
  },
  setup() {
    const handleChange = (info: FileInfo) => {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    };

    const fileList = ref([]);
    return {
      fileList,
      headers: {
        authorization: 'authorization-text',
      },
      handleChange,
    };
  },
  data() {
    return {
      reply: '',
      issue: '',
      //会话
      conversation: new Map,
      //当前会话
      currentSession: undefined,
      currentActiveSession: undefined,
      //按钮加载
      loading: false,
      requestError: false,
    };
  },
  mounted() {
  },
  updated() {
    this.scrollToBottom()
  },
  methods: {
    operateleave(item) {
      console.log(item)
      item.operate = false
      this.currentSession.recording.set(item.id, item)
    },
    operateover(item) {
      item.operate = true
      this.currentSession.recording.set(item.id, item)
    },
    scrollToBottom() {
      this.$nextTick(() => {
        let box = this.$el.querySelector(".px-2")
        box.scrollTop = box.scrollHeight
        let box1 = this.$el.querySelector(".Chat-conversation")
        box1.scrollTop = box1.scrollHeight
      })
    },
    questions(clean) {
      if (this.issue === '') {
        return;
      }
      this.loading = true;
      let now = new Date();
      let year = now.getFullYear(); //年份
      let month = now.getMonth() + 1; //月份（0-11）
      let date = now.getDate(); //天数（1到31）
      let hour = now.getHours(); //小时数（0到23）
      let minute = now.getMinutes(); //分钟数（0到59）
      let second = now.getSeconds(); //秒数（0到59）
      var time = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second

      var issue = {
        id: v4(),
        type: 'issue',
        text: this.issue,
        name: '我',
        date: time
      }
      let newTopic = {
        id: v4(),
        type: 'newTopic',
        text: '新话题',
        name: '',
        operate: false,
        date: time
      }
      if (this.currentSession === undefined) {
        let issueSession = {
          id: v4(),
          title: this.issue,
          //对话记录
          recording: new Map()
        }
        this.currentSession = issueSession;
        this.currentSession.recording.set(newTopic.id, newTopic)
        this.currentSession.recording.set(issue.id, issue)
        this.conversation.set(issueSession.id, issueSession)

      } else {
        if (clean) {
          this.currentSession.recording.set(newTopic.id, newTopic)
          this.cleanServiceSession()
        }
        this.currentSession.recording.set(issue.id, issue)
      }


      var typing = {
        id: v4(),
        type: 'typing',
        text: "",
        name: 'AI',
        operate: false,
        date: time
      }
      this.currentSession.recording.set(typing.id, typing)
      var reply = {
        id: v4(),
        type: 'reply',
        text: "",
        name: 'AI',
        operate: false,
        date: time
      }
      /**
       * 请求后端
       * */
      this.currentSession.typing = true
      this.conversation.set(this.currentSession.id, this.currentSession)
      var source = new EventSource('/api/chatgpt/questions?prompt=' + this.issue);
      this.issue = '';
      const _this = this
      source.onmessage = function (event) {
        if (event.data === "[DONE]") {
          source.close()
          _this.currentSession.typing = false
          _this.loading = false;
        } else {
          try {
            _this.requestError = false
            _this.currentSession.recording.delete(typing.id)
          } catch (e) {
            _this.currentSession.recording.set(reply.id, reply)
          }
          let response = JSON.parse(event.data);
          for (let i = 0; i < response.choices.length; i++) {
            if (response.choices[i].delta != null && response.choices[i].delta.content != null) {
              _this.reply = response.choices[i].delta.content
              reply.text += response.choices[i].delta.content
            }
          }
          _this.currentSession.recording.set(reply.id, reply)
        }

      };
      source.onerror = function (e) {
        source.close()
        reply.text = "服务器连接异常";
        _this.requestError = true
        _this.currentSession.recording.delete(typing.id)
        _this.currentSession.recording.set(reply.id, reply)
        _this.loading = false;
      }
      this.conversation.set(this.currentSession.id, this.currentSession)
    },
    copyText(text) {
      this.$copyText(text).then(
          e => {
            message.success('复制成功');
          },
          e => {
            message.warning('该浏览器不支持自动复制');
          }
      )
    },
    handleCopyCodeSuccess(code) {
      message.success('复制成功');
      console.log(code);
    },
    cleanServiceSession() {
      axios.get("/api/config/clearSession")
    },
    createSession() {
      let now = new Date();
      let year = now.getFullYear(); //年份
      let month = now.getMonth() + 1; //月份（0-11）
      let date = now.getDate(); //天数（1到31）
      let hour = now.getHours(); //小时数（0到23）
      let minute = now.getMinutes(); //分钟数（0到59）
      let second = now.getSeconds(); //秒数（0到59）
      var time = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second

      let newTopic = {
        id: v4(),
        type: 'newTopic',
        text: '请在下方文本框输入您想要问的问题',
        name: '',
        operate: false,
        date: time
      }
      let session = {
        id: v4(),
        title: "新会话",
        typing: false,
        updateTime: time,
        //对话记录
        recording: new Map().set(newTopic.id, newTopic)
      }
      this.currentSession = session
      this.currentActiveSession = session.id
      this.conversation.set(session.id, session)
    },
    switchSessions(itme) {
      this.currentSession = this.conversation.get(itme)
      this.currentActiveSession = itme;
    },
    deleteSessionsRecording(item) {
      this.currentSession.recording.delete(item)
      this.conversation.set(this.currentSession.id, this.currentSession)
    },
    deleteSessions() {
      this.cleanServiceSession()
      if (this.currentSession !== undefined) {
        this.conversation.delete(this.currentSession.id)
        let session = this.conversation.values().next().value;
        if (session !== undefined) {
          this.currentSession = session
          return
        }
      }
      this.createSession()
    },
    clearSession() {
      this.cleanServiceSession()
      this.conversation = new Map
    }
  },
}
</script>

<style scoped>
::v-deep .vuepress-markdown-body:not(.custom) {
  padding: 0;
  background-color: transparent;
  color: #fff;
}

::v-deep .vuepress-markdown-body:not(.custom) code {
  color: #fff;
  background: #282c34;
}

.chat-conversation .right .conversation-list ::v-deep .vuepress-markdown-body:not(.custom) {
  color: #2c3e50;
}

.chat-conversation .right .conversation-list .ctext-wrap-content {
  text-align: left;
}

.chat-conversation .conversation-list {
  display: flex;
}

.chat-conversation .right .conversation-list {
  float: none;
}

.chat-conversation .right .conversation-list .conversation-name {
  text-align: right;
}

.chat-conversation .right .conversation-list .ctext-wrap {
  display: flex;
  justify-content: flex-end;
}

</style>
